<template>
  <div class="front shopEnquiry">
    <div class="banner"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage?shopInfo.shopBackendImage:require('@/assets/front-img/shop/banner.png')})`}">
    </div>
    <div class="docWidth warpper">
      <div class="title">新建询价单<span @click="$router.push('/mall/enquiry')">已有询价单</span></div>
      <div class="form">
        <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="94px"
          style="width:500px">
          <el-form-item label="产品名称" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入1-20位字符的产品名称" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item label="产品数量" prop="num">
            <NumInput :min="1" :float="0" placeholder="请输入产品数量" v-model="form.num" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model.trim="form.unit" placeholder="请输入产品的单位、如：“个”" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model.trim="form.contactName" placeholder="请输入企业联系人名称" />
          </el-form-item>
          <el-form-item label="联系电话" prop="contactMobile">
            <el-input v-model.trim="form.contactMobile" placeholder="请输入企业联系人电话" />
          </el-form-item>
          <el-form-item label="详细说明">
            <el-input v-model.trim="form.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
          </el-form-item>
          <el-form-item label="上传附件">
            <Upload :defaultFileName.sync="form.file" :mode="2" />
          </el-form-item>
          <el-form-item>
            <el-button class="postBt" :loading="loading" type="primary" @click="inquiryCommit()">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { inquiryCommit } from "@/api/front-home";
import NumInput from '@/components/NumInput'
import Upload from '@/components/Upload'
export default {
  name: 'FrontShopEnquiry',
  components: { Upload, NumInput },
  data() {
    return {
      form: {
        name: '',
        num: '',
        unit: '',
        contactName: '',
        contactMobile: '',
        file: '',
        remark: '',
        gongyingId: ''
      },
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        num: [{ required: true, message: '请输入', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入', trigger: 'blur' }],
        contactMobile: [{ required: true, validator: this.$mobileValidator, trigger: 'blur' }],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    })
  },
  created() {
    const shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    if (this.$store.state.front.shopId !== shopId) {
      this.$store.commit("front/SET_SHOPID", shopId)
      this.$store.dispatch('front/getShopInfo', shopId)
    }
    this.form.gongyingId = shopId
  },
  methods: {
    inquiryCommit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          inquiryCommit(this.form)
            .then(res => {
              this.loading = false
              this.$message.success('提交成功')
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }
  },
};
</script>
<style lang="scss">
.shopEnquiry {
  .el-button--primary {
    background-color: #965f29;
    border-color: #965f29;
  }
}
</style>
<style lang="scss" scoped>
.shopEnquiry {
  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 328px;
  }
  .warpper {
    margin-top: 32px;
    margin-bottom: 25px;
    .title {
      font-size: 25px;
      color: #965f29;
      line-height: 40px;
      span {
        cursor: pointer;
        margin-left: 80px;
        font-size: 20px;
        color: #000;
      }
    }
    .form {
      padding: 40px 80px;
      border: 1px solid #e6e6e6;
      margin-top: 25px;
    }
  }
  .postBt {
    padding: 10px 120px;
  }
}
</style>